<template>
  <div class="date">
    <van-popup v-model="showDatePop"
               round
               position="bottom">
      <!-- 选择日期 -->
      <div class="date-wrap">
        <div class="date-wrap-box">
          <div class="left">
            <van-picker
              title="预约时间段"
              show-toolbar
              :columns="changecolumns"
              @confirm="timeConfirm"
              @cancel="timeCancel"
              @change="onChange"
            />
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import Vue from 'vue'
// import { formatDay } from '@/utils/index'
import { DatetimePicker, Picker } from 'vant'
import { Popup } from 'vant'
Vue.use(Popup)
Vue.use(DatetimePicker).use(Picker)
export default Vue.extend({
  data() {
    return {
      date: '',
      time: '',
      showDatePop: false,
      columns: [],
      changecolumns: [
        { values: ['未设置'] }, // '06月08 今天', '06月09 明天', '06月11 周四'
        { values: ['未设置'] } // '08:00~10:00', '10:00~12:00', '12:00~14:00', '14:00~16:00'
      ]
    }
  },
  watch: {
    columns() {
      this.changecolumns = this.processingData()
      if (this.changecolumns[1].values.length == 0) {
        this.columns[0].values.splice(0, 1)
        this.changecolumns = this.columns
      }
    }
  },
  methods: {
    onChange(e, value, index) {
      // console.log(value)
      if (value[0].indexOf(this.doHandleMonth()) != -1 && value[0].indexOf(this.doHandleDay()) != -1) {
        this.changecolumns = this.processingData()
      } else {
        this.changecolumns = this.columns
      }
    },
    processingData() {
      const dataStr = JSON.stringify(this.columns)
      const data = JSON.parse(dataStr)
      const arr = data[1].values
      const myDate = new Date()
      const hour = myDate.getHours()
      const min = myDate.getMinutes()

      for (let i = arr.length - 1; i >= 0; i--) {
        const itemArr = arr[i].split('~')[1].split(':')
        if (itemArr[0] < hour) {
          arr.splice(i, 1)
        } else if (itemArr[0] == hour && itemArr[1] < min) {
          arr.splice(i, 1)
        }
      }
      data[1].values = arr
      return data
    },
    doHandleDay() {
      var myDate = new Date()
      var tDay = myDate.getDate()

      var m = tDay
      if (m.toString().length == 1) {
        m = '0' + m
      }
      return m
    },
    doHandleMonth() {
      var myDate = new Date()
      var tMonth = myDate.getMonth()

      var m = tMonth + 1
      if (m.toString().length == 1) {
        m = '0' + m
      }
      return m
    },
    // 日期
    clickStart(e) {
      this.showDatePop = true
    },
    // 时间段确认
    timeConfirm(value, index) {
      this.$emit('dateTime', value[0], value[1])
      this.timeCancel()
    },
    // 时间段取消
    timeCancel() {
      this.showDatePop = false
    }
  }
})
</script>

<style lang="scss">
  .date{
    &-wrap{
      &-title{
        text-align: center;
        line-height: 90px;
        height: 90px;
        font-size: 32px;
      }
    }
  }
</style>
